<template>
  <div>
      <el-form :model="config" label-position="right"  :rules="rule" label-width="120px">
          <el-form-item label="LOGO图:"  prop="imgUrl" >
           <imgCard
          v-model="config.webconfig.logoimg"
          class="upload-btn"
          :imageUrl="config.webconfig.logoimg"
          @on-success="bindImagUpLogo" />
        </el-form-item>
        <el-form-item label="微信图:"  prop="imgUrl" >
           <imgCard
          v-model="config.webconfig.qrcode"
          class="upload-btn"
          :imageUrl="config.webconfig.qrcode"
          @on-success="bindImagUpQuery" />
        </el-form-item>
        <el-form-item label="显示数量:"  prop="gameName" >
           <el-input-number v-model="config.webconfig.pageshow"  :min="0"  label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="网页foot说明:"  prop="versionName" >
          <el-input type="textarea"  v-model="config.webconfig.mzsm" :clearable="true"  placeholder="请输入" />
        </el-form-item>
        <el-form-item label="盒子公告:"  prop="versionName" >
          <el-input   v-model="config.webconfig.boxnote" :clearable="true"  placeholder="请输入" />
        </el-form-item>
        <el-form-item label="盒子版本号:"  prop="versionName" >
          <el-input  v-model="config.webconfig.boxversion" :clearable="true"  placeholder="请输入" />
        </el-form-item>
      </el-form>

        <div class="dialog-footer">
          <el-button type="primary" @click="enterDialog">确 定</el-button>
        </div>
  </div>
</template>

<script>
export default {
  name: 'servers'
}
</script>

<script setup>
import { getSystemConfig, setSystemConfig } from '@/api/system'
import imgCard from '@/components/upload/imgCard.vue'
 
// 全量引入格式化工具 请按需保留

import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'

const config = ref({
  webconfig: {}
})

// 验证规则
const rule = reactive({
  imgUrl: [{
    required: true,
      message: '请选择banner图',
      trigger: 'change',
  }]
})




const initForm = async() => {
  const res = await getSystemConfig()
  if (res.code === 0) {
    config.value = res.data.config
  }
}
initForm()

const enterDialog = async() => {
  const res = await setSystemConfig({ config: config.value })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '配置文件设置成功'
    })

  }
}

const bindImagUpLogo = async (e) => {
  config.value.webconfig.logoimg=e
}
const bindImagUpQuery= async (e) => {
   config.value.webconfig.qrcode=e
}

</script>

<style>
</style>
